<template>
	<view class="col" style="position: relative;">
		
		<div class="contain_page">
			
			<view class="content col" style="width:100%; padding-top: 60upx; box-sizing: border-box;">
				<view class="head_bg row_center">
					<image src="../../../static/img/home_logo.png" mode="aspectFill"></image>
				</view>
			</view>
			
			<div class="type_list">
				<scroll-view id="tab-bar" class="uni-swiper-tab "
					scroll-x :scroll-left="scrollLeft">
					<view v-for="(tab,index) in typeList" :key="tab.id" class="swiper-tab-list"
					 :id="tab.id" :data-current="index" @click="changeType(index)">
						<span :class="{'active':(index==typeIndex)}">{{tab.name}}</span>
						<span class="line" v-if="index==typeIndex"></span>
					 </view>
				</scroll-view>
			</div>
			
			
			<swiper class="swiper swiper_all" :current="typeIndex" @change="swiperChange">
				<swiper-item v-for="(tab,ind) in typeList" :key="ind">
					<div style=" width: 100%;" v-if="!isShowError" >
						
						<mescroll-uni top="0" :bottom="refreshBottom" :down="downOption" @down="downCallback" @up="upCallback" :up="upOption">
						
							<div class="swiper_wrap" v-if="typeIndex == 0">
								<swiper :indicator-dots="false" :autoplay="true" @change="slideChange"
										:interval="3000" :duration="500" class="head_img">            
										<swiper-item v-for="(item, index) in bannerInfoList" :key="index" class="head_img" @tap="goToH5(bannerInfoList[index].url)">  
											<image  :src="item.loading?item.picUrl:item.defaultSrc" mode="widthFix" class="head_img"  @load="imageBannerLoad(index)"></image> 
											<view class="swiper_text gradient" v-if="item.title">{{item.title}}</view>
										</swiper-item>        
								</swiper>
								
								<view class="dots">
									<block v-for="(item, index) in bannerInfoList" :key="index">
										<view class="dot_normal" :class="{'active': (index==bannerInfoListIndex)}"></view>
									</block>
								</view>
							</div>
							
						<div class="page_content_wrap" v-if="rebateBannerList && indexPlatList">
							<div class="title_info_wrap" @click="goToInfoDetail" v-if="hideFunc && (typeIndex == 0)">
								<span>理财返利</span>
								<span class="arraw_black"></span>
							</div>
							<div class="swiper_wrap_second" v-if="hideFunc && rebateBannerList && (typeIndex == 0)">
								<swiper :indicator-dots="false" :autoplay="rebateBannerList.length > 0" 
										:interval="3000" :duration="500" class="head_img_second" @change="slideSecondChange">            
										<swiper-item v-for="(item, index) in rebateBannerList" :key="index" class="head_img_second" @tap="goToH5(rebateBannerList[index].url)">  
											<image :src="item.loading?item.picUrl:item.defaultSrc" mode="widthFix" class="head_img_second"  @load="imageRebateLoad(index)"></image>           
										</swiper-item>        
								</swiper> 
								
								<view class="dots" v-if="rebateBannerList.length > 1">
									<block v-for="(item, index) in rebateBannerList" :key="index">
										<view class="dot_normal" :class="{'active': (index==rebateBannerListIndex)}"></view>
									</block>
								</view>
								
							</div>
							
							<div class="dai_wrap" v-if="indexPlatList && hideFunc && (typeIndex == 0)">
								<div class="item_wrap" @click="goToH5(indexPlatList[index].url)" 
									v-for="(item, index) in indexPlatList" :key="index" :style="{'margin': (index==1?'22upx 6upx 0upx':'')}">
									<image src="../../../static/img/home_you_green.png" mode="aspectFill" v-if="index != 1"></image>
									<image src="../../../static/img/home_you_black.png" mode="aspectFill" v-else=""></image>
									<div class="dai_item" :style="{'color': (index==1?'#FFF':'#303030')}">
										<span>{{item.platName}}</span>
										<div class="percent">
											<span>{{item.profitValue}}</span>
											<span class="percent_hao">{{item.profitUnit}}</span>
										</div>
										<span class="tag" :style="{'background': (index==1?'#D0B16E':'#000')}">收益高达</span>
									</div>
									
								</div>
							</div>
							
							<div class="title_info_wrap" v-if="hideFunc && (welfareBannerList.length > 0) && (typeIndex == 0)" @tap="goToH5(welfareUrl)" >
								<span>福利专区</span>
								<span class="arraw_black"></span>
							</div>
							<div class="swiper_wrap_third" v-if="hideFunc && (welfareBannerList.length > 0) && (typeIndex == 0)">
								<swiper :indicator-dots="false" :autoplay="welfareBannerList.length > 0" @change="slideThirdChange"
										:interval="3000" :duration="500" class="head_img_third">            
										<swiper-item v-for="(item, index) in welfareBannerList" :key="index" class="head_img_third" @tap="goToH5(welfareBannerList[index].url)">  
											<image :src="item.loading?item.picUrl:item.defaultSrc" mode="widthFix" class="head_img_third" @load="imageWelfareLoad(index)" ></image>           
										</swiper-item>        
								</swiper> 
								
								<view class="dots" v-if="welfareBannerList.length > 1">
									<block v-for="(item, index) in welfareBannerList" :key="index">
										<view class="dot_normal" :class="{'active': (index==welfareBannerListIndex)}"></view>
									</block>
								</view>
							</div>
							
							<div class="title_info_wrap" v-if="typeIndex == 0">最新资讯</div>
							<div class="zixun_list">
								<div class="item_wrap row_between" @tap="goToH5(tab.zixunList[index].newsUrl)"
									v-for="(item, index) in tab.zixunList" :key="index">
									<div class="col_between content_wrap">
										<span class="title">{{item.title}}</span>
										<div class="row_between" style="width: 100%; margin-top: 0upx; font-size: 24upx;">
											<span>{{item.publishDateStr}}</span>
											<span>{{item.viewCount}}阅读</span>
										</div>
									</div>
									<image :src="item.picUrl" mode="aspectFill" class="image" ></image>
									<image src="../../../static/img/default_icon.png" mode="aspectFill" class="default_image" ></image>
								</div>
								
							</div>
							
						</div>
						
						</mescroll-uni>
							
					</div>
			
					<div class="col_center wrap" v-if="isShowError">
						<image src="../../../static/img/server_error.png" mode="widthFix"></image>
						<span>页面请求失败～</span>
						
						<button class="btn" @click="reloadFunc">重新加载</button>
					</div>
				</swiper-item>
			</swiper>
			
			
			
		</div>
		
	
		<div class="modal-mask global-modal row_center" v-if="isShowUpdate" @touchmove.stop.prevent="moveHandle">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="col update_content_bg">
						<div class="title">发现新版本</div>
						<div class="version">{{updateVersion}}</div>
						<!-- <div class="update_msg">{{updateDesc}}</div> -->
						<rich-text class="update_msg" :nodes="updateDesc"></rich-text> 
						<div class="updateAction row" >
							<span class="no_update" v-if="!isForce" @tap="noUpdate">暂不升级</span>
							<span @tap="updateNow">立即升级</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
	</view>
	
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	import tuiSticky from "@/components/sticky/sticky";
	
	import MescrollUni from "@/components/mescroll-diy/mescroll-xinlang.vue";
	
	import { BASE_IMAGE_URL,homeConfig,homeData,upgrade,newsList,userCenter,userinfo,userMenu } from '@/utils/api'
	
	export default {
		components: {
			uniLoadMore,
			tuiSticky,
			MescrollUni
		},
	data() {
		return {
			scrollTop: 0,
			typeList:[
				{"name": "最新","otherFunctionId": 0,zixunList:[]}
			],
			typeIndex: 0,
			animationData:{},
			headerFixed:0,
			top: '60upx',
			bannerInfoList: [],
			bannerInfoListIndex: 0,
			rebateBannerListIndex: 0,
			welfareBannerListIndex: 0,
			indexPlatList: [],
			rebateBannerList: [],
			welfareBannerList: [],
			// zixunList: [],
			hideFunc: true,
			loadingType: 0,
			page: 1,
			scrollLeft: 0,
			loadingText: {
				contentdown: "上拉显示更多",
				contentrefresh: "正在加载...",
				contentnomore: "没有更多数据了"
			},
			list:[],
			updateDesc: "",
			isShowUpdate: false,
			downLoadUrl: '',
			isForce: false,
			updateVersion: 'v1.0.0',
			welfareUrl: '',
			publishLong: 0,
			isShowError: false,
			isDownloading: false,
			isShowTip: true,
			refreshBottom: 0,
			
			downOption:{
				auto:false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
			},
			upOption:{
				auto:false
			},
			loadingNum: 0
		};
	},
	onPageScroll(e) {
		this.scrollTop= e.scrollTop;
		console.log(this.scrollTop);
	},
	onLoad() {
		uni.showLoading({
			title:"加载中..."
		});
		setTimeout(()=>{
			uni.hideLoading();
		}, 10000);
		this.homeConfig();
		this.homeData();
		this.upgrade();
		// this.homeConfig();
		// this.newsList();
		// #ifdef APP-PLUS
		this.refreshBottom = 20;
		// #endif
		
		// #ifdef H5
		this.refreshBottom = 0;
		// #endif
	},
	onShow() {
		// if(uni.getStorageSync("error") == 1){
		// 	this.homeData();
		// 	this.newsList('',this.typeIndex);
		// 	uni.removeStorageSync("error");
		// }
		
		// setTimeout(()=>{
		// 	uni.setTabBarStyle({
		// 		backgroundColor: "#00000000",
		// 		color: "#00000000"
		// 	})
		// },2000);
		
	},
	
	methods: {
		swiperChange(e){
			console.log(e.target.current);
			this.typeIndex = e.target.current;
			this.$forceUpdate();
			
		},
		imageBannerLoad(index){
			this.bannerInfoList[index].loading = true;
			setTimeout(()=>{
				uni.hideLoading();
			}, 2000);
			
		},
		imageRebateLoad(index){
			this.rebateBannerList[index].loading = true;
		},
		imageWelfareLoad(index){
			this.welfareBannerList[index].loading = true;
		},
		imageListLoad(index){
			if(this.zixunList && this.zixunList[index]){
				this.zixunList[index].loading = true;
			}
			
		},
		imageError(index){
			// if(this.zixunList && this.zixunList[index]){
			// 	this.zixunList[index].picUrl = '../../../static/img/default_icon.png';
			// }
			
		},
		/*下拉刷新的回调 */
		downCallback(mescroll){
			console.log("downCallback");
			setTimeout(() => {
				this.showRefreshTips = true;
				this.publishLong = 0;
				this.newsList(mescroll, this.typeIndex);
			}, 500);
		},
		/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
		upCallback(mescroll) {
			//联网加载数据
			
			setTimeout(()=>{
				if(this.typeList[this.typeIndex].zixunList && (this.typeList[this.typeIndex].zixunList.length > 0)){
					this.publishLong = this.typeList[this.typeIndex].zixunList[this.typeList[this.typeIndex].zixunList.length - 1].publishLong;
					this.newsList(mescroll, this.typeIndex);
				}else{
					mescroll.endSuccess();
				}
			}, 500);
			
		},
		moveHandle(){},
		
		reloadFunc(){
			this.publishLong = 0;
			// this.newsList('', this.typeIndex);
			uni.showLoading({
				title:"加载中..."
			});
			setTimeout(()=>{
				uni.hideLoading();
			}, 10000);
			this.homeConfig();
			this.homeData();
			this.upgrade();
		},
		changeType(index){
			this.showRefreshTips = false;
			this.typeIndex = index;
			this.publishLong = 0;
			this.newsList('', this.typeIndex);
		},
		async newsList(mescroll, tabIndex){
			let res = await newsList(this.typeList[tabIndex].otherFunctionId, this.publishLong);
			if(res && res.code == 1){
				this.isShowError = false;
				res.data.map((item) => {
					item.loading = false;
					item.defaultSrc = '../../../static/img/default_icon.png';
				})
				if(this.publishLong==0)
				{
					
					console.log(res.data.length);
					this.typeList[tabIndex].zixunList = res.data;
					if(mescroll){
						if(res.data.length < 10){
							mescroll.endSuccess(res.data.length, false);
						}else{
							mescroll.endSuccess(res.data.length, true);
						}
					}
					
				}
				else{
					this.typeList[tabIndex].zixunList = this.typeList[tabIndex].zixunList.concat(res.data);
					// this.zixunList=this.zixunList.concat(res.data);
					if(mescroll){
						mescroll.endSuccess(res.data.length);
					}
				}
				// console.log(this.typeList[tabIndex].zixunList);
			}else{
				mescroll.endErr();
				uni.showToast({
				    title: '请求失败',
				    icon: 'none',
				    duration: 2000
				})
			}
			
		},
		async homeConfig(){
			this.hideFunc = true;
			uni.setStorageSync("hideFunc", 0);
			let res = await homeConfig();
			if(res && res.code == 1){
				this.typeList = res.data.labelList;
				this.typeList.map((item, index) => {
					this.newsList('',index);
				})
				
				let platform = uni.getSystemInfoSync().platform;
				let channelCode = "hanle";
				console.log(platform);
				if(platform == "ios"){
					channelCode = "ios";
				}else if(platform == "android"){
					// #ifdef APP-PLUS
						channelCode = plus.runtime.channel?plus.runtime.channel:'hanle';
					// #endif
				}
				console.log(channelCode);
				
				// #ifdef APP-PLUS
				let that = this;
				plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo){  
				    console.log(wgtinfo.version);  
					if(res.data.blackList){
						res.data.blackList.map((item) => {
							if((item.channelCode == channelCode) && (wgtinfo.version == item.appVersion)){
								that.hideFunc = false;
								console.log("9900877666");
							}
						})
					}
					console.log(that.hideFunc);
					uni.setStorageSync("hideFunc", that.hideFunc?0:1);
					
				});
				
				
				// #endif
				
				
				// #ifdef H5
				this.hideFunc = true;
				// #endif
				console.log(this.hideFunc);
				this.$forceUpdate();
			}else{
				this.isShowError = true;
			}
		},
		async homeData(){
			if(this.bannerInfoList.length > 0){
				return;
			}
			let res = await homeData();
			if(res && res.code == 1){
				this.bannerInfoList = res.data.bannerInfoList;
				this.indexPlatList = res.data.indexPlatList;
				this.rebateBannerList = res.data.rebateBannerList;
				this.welfareBannerList = res.data.welfareBannerList;
				this.welfareUrl = res.data.welfareUrl;
				
				this.bannerInfoList.map((item) => {
					item.loading = false;
					item.defaultSrc = '../../../static/img/big_default.png'
				});
				
				this.rebateBannerList.map((item) => {
					item.loading = false;
					item.defaultSrc = '../../../static/img/small_default.png'
				});
				
				this.welfareBannerList.map((item) => {
					item.loading = false;
					item.defaultSrc = '../../../static/img/middle_default.png'
				});
			}
		},
		noUpdate(){
			this.isShowUpdate = false;
			uni.showTabBar();
		},
		updateNow(){
			this.isShowUpdate = false;
			uni.showTabBar();
			if(this.isDownloading){
				uni.showToast({  
					title: '正在下载',
					duration: 1500  
				}); 
			}else{
				this.downLoadApp();
			}
			
		},
		goToInfoDetail(){
			uni.navigateTo({
				url:'../../info_detail/info_detail'
			})
		},
		async upgrade(){
			let res = await upgrade();
			if(res && res.code == 1){
				this.isShowUpdate = true;
				uni.hideTabBar();
				
				
				this.updateDesc = res.data.desc;
				
				// 提示更新
				this.downLoadUrl = res.data.url;
				if(res.data.upgradeType == 1){
					// 强制更新
					this.isForce = true;
					uni.setStorageSync("force", 1)
				}else{
					this.isForce = false;
				}
				this.updateVersion = res.data.appVersion;
			}
		},
		downLoadApp(){
			// #ifdef APP-PLUS
			if (plus.os.name=="Android") { 
				
			}else{
				plus.runtime.openURL(this.downLoadUrl, function(res) {  
                    console.log(res);  
                });
				return;
			}
			var dtask = plus.downloader.createDownload(this.downLoadUrl, { filename: "_doc/update/" }, function ( d, status ) {  
				// 下载完成  
				if ( status == 200 ) {   
					plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename),{},function(data){
						plus.runtime.restart();
					},function(error){  
						console.log(error);
						uni.showToast({  
							title: '安装失败',
							duration: 1500  
						});  
					})  
				} else {  
					 uni.showToast({  
						title: '更新失败', 
						duration: 1500  
					 });  
				}    
			}); 
			
			dtask.start();
			// var w = plus.nativeUI.showWaiting("下载升级文件...");
			this.isDownloading = true;
			dtask.addEventListener("statechanged", function(task, status) {
				switch (task.state) {
					case 1: // 开始
						// w.setTitle("　　 开始下载...　　 ");
						
						break;
					case 2: // 已连接到服务器
						// w.setTitle("　　 开始下载...　　 ");
						break;
					case 3:
						var a = task.downloadedSize / task.totalSize * 100;
						// w.setTitle("　　 已下载" + parseInt(a) + "%　　 ");
						break;
					case 4: // 下载完成
						w.close();
						break;
				}
			})
			// #endif
		},
		goToH5: function(url){
			uni.navigateTo({
				url: '/pages/home_webview/home_webview?url='+url
			});
		},
		goToDetail(url){
			uni.navigateTo({
				url: '/pages/login_webview/login_webview?url='+escape(url)
			});
		},
		
		slideChange: function(e){
			this.bannerInfoListIndex = e.mp.detail.current;
		},
		slideSecondChange: function(e){
			this.rebateBannerListIndex = e.mp.detail.current;
		},
		slideThirdChange: function(e){
			this.welfareBannerListIndex = e.mp.detail.current;
		},
		
		async userCenter(){
				let res = await userCenter();
				if(res.code == 1){
					this.phone = res.data.userPhone;
					this.balance = parseFloat(res.data.balance).toFixed(2).split(".");
					console.log(this.balance);
				}
				uni.stopPullDownRefresh();
				
			},
			async userMenu(){
				let res = await userMenu();
				if(res.code == 1){
					this.menuList = res.data;
					this.$forceUpdate();
				};
				console.log(JSON.stringify(this.menuList));
				uni.stopPullDownRefresh();
				
			},
			goToKeFu(){
				uni.navigateTo({
					url: '/pages/kefu/kefu'
				});
			},
			menuClick(index){
				let needLogin = this.menuList[index].needLogin;
				if(needLogin == 1){
					if(!this.isLogin){
						uni.navigateTo({
							url: '/pages/get_code/get_code'
						});
					}else{
						uni.navigateTo({
							url: '/pages/home_webview/home_webview?url='+this.menuList[index].url
						});
					}
				}else{
					uni.navigateTo({
						url: '/pages/home_webview/home_webview?url='+this.menuList[index].url
					});
				}
				
			},
			goToWallet: function(){
				if(!this.isLogin){
					uni.navigateTo({
						url: '/pages/get_code/get_code'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/bind_wallet/bind_wallet'
				});
			},
			goToVip: function(){
				uni.navigateTo({
					url: '/pages/get_code/get_code'
				});
				
			},
			goToLogout: function(){
				uni.showModal({
					title: '提示',
					content:"确定退出登录吗?",
					confirmText:'确定',
					cancelText:'取消',
					confirmColor:'#000000',
					cancelColor:'#999999',
					success: (res) => {
						if (res.confirm) {
							// #ifdef APP-PLUS
								plus.navigator.removeAllCookie();
							// #endif
							uni.removeStorageSync("auth_token");
							this.isLogin = false;
							this.userHead = '../../../static/img/nologin_head.png';
						} else if (res.cancel) {
						}
					}
				})
			}
		
	}
	
};
</script>

<style>

.contain_page{width:100%;box-sizing: border-box;height: 100vh; }	
.contain_page_my{width:100%;box-sizing: border-box;height: 100vh; position: absolute;top:0upx; left: 0upx;}	
.swiper_all{height: calc(100vh - 124px); top: 260upx; position: absolute;width: 100%; padding-top: 0upx;}

.tab_bar_wrap{position: fixed; background: #FFF; border-top: 2upx solid #E6E6E6; bottom: 0upx; height: 100upx;
	width: 100%; z-index: 10000; padding-bottom: 0upx;}
.tab_bar_wrap span{color: #261900; font-size: 28upx;}
.tab_bar_wrap image{width: 42upx; height: 42upx;}
/* .tab_active{padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);} */
.loading_div{height: 140upx; }
	
page{height: 100%; background: #FFFFFF; }
.content {color: #666666; font-size: 24upx;  z-index: 100;background-color: #FFCA0A; position: fixed;}

.head_bg{ width: 100%; height: 100upx;}
.head_bg image{width: 182upx; height: 43upx;}
.type_list{background-color: #FFFFFF; position: fixed; top: 160upx;height: 100upx; z-index: 100;width: 100%;margin-top: 0upx;}
.type_list_active{background-color: #F1F1F1; height: 100upx; z-index: 0; width:100%; }
.type_list .line{background: #000000; height: 6upx; width:26upx; display: inline-block; position: absolute;left: 40%; bottom: 0upx;} 
.type_list .active{color: #261900; font-size: 34upx; font-weight: bold;}
.type_list .swiper-tab-list{position: relative;}

.swiper_wrap{position: relative; height: 302upx;margin: 0upx 30upx 80upx;z-index: 2;box-sizing: border-box;border-radius: 20upx;}
.head_img{width: 100%;height: 302upx!important;border-radius: 8upx;}
.head_img swiper-item{}

.swiper_wrap .dots{display: flex;flex-direction: row;justify-content: center;align-items: center;position: absolute;bottom: -28upx;height: 20upx;width: 100%;z-index: 10;}
.swiper_wrap .dot_normal{width: 4upx;height: 4upx;border: 4upx solid #EEEEEE; transform: rotate(45deg);
	background-color: #EEEEEE;margin: 0upx 12upx;position: relative;z-index: 10;}
.swiper_wrap .dots .active{border: 4upx solid #FFCA0A; background-color: #FFCA0A; width: 8upx; height: 8upx;}

.swiper_wrap_second .dots{display: flex;flex-direction: row;justify-content: center;align-items: center;position: absolute;bottom: -28upx;height: 20upx;width: 100%;z-index: 10;}
.swiper_wrap_second .dot_normal{width: 10upx;height: 10upx;border-radius: 50%;background-color: rgba(0,0,0,0.2);margin: 0upx 6upx;position: relative;z-index: 10;}
.swiper_wrap_second .dots .active{background-color: rgba(0,0,0,0.8);}

.swiper_wrap_third .dots{display: flex;flex-direction: row;justify-content: center;align-items: center;position: absolute;bottom: -28upx;height: 20upx;width: 100%;z-index: 10;}
.swiper_wrap_third .dot_normal{width: 10upx;height: 10upx;border-radius: 50%;background-color: rgba(0,0,0,0.2);margin: 0upx 6upx;position: relative;z-index: 10;}
.swiper_wrap_third .dots .active{background-color: rgba(0,0,0,0.8);}


.swiper_wrap .swiper_text{color: #FFFFFF; font-size: 30upx; height: 100upx; position: absolute;bottom: 0upx; width: 100%;line-height: 120upx;padding-left: 20upx;}
.gradient{background:linear-gradient(0deg,rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%);}


.swiper_wrap_second{position: relative;width: 100%; height: 126upx;margin: 10upx auto 0;z-index: 2;box-sizing: border-box;border-radius: 20upx;}
.swiper_wrap_second .dots{display: flex;flex-direction: row;justify-content: center;align-items: center;position: absolute;bottom: 13upx;height: 20upx;width: 100%;z-index: 10;}
.head_img_second{width: 100%;height: 127upx!important; border-radius: 8upx;}
.head_img_second swiper-item{}

.swiper_wrap_third{position: relative;width: 100%; height: 160upx;margin: 20upx auto 70upx;z-index: 2;box-sizing: border-box;border-radius: 20upx;}
.swiper_wrap_third .dots{display: flex;flex-direction: row;justify-content: center;align-items: center;position: absolute;bottom: 10upx;height: 20upx;width: 100%;z-index: 10;}
.head_img_third{width: 100%;height: 160upx!important; border-radius: 8upx;}
.head_img_third swiper-item{}

.page_content_wrap{width: 100%; padding:0upx 30upx; box-sizing:border-box;background: #fff;}
.title_info_wrap{display: flex;flex-direction: row; justify-content: space-between; margin-bottom: 30upx;
	color: #010101; font-size: 36upx; align-items: center; font-weight: bold; padding-right: 10upx;}

.zixun_list{margin-bottom: 0upx; background: #FFFFFF;}
.zixun_list .item_wrap{height: 180upx; width: 100%; box-sizing: border-box;}
.zixun_list .item_wrap .content_wrap{height: 140upx; flex: 1; color: #999999; font-size: 16upx; line-height: 1.0;}
.zixun_list .item_wrap .content_wrap .title{color:#303030; font-size: 32upx; font-weight: bold; line-height: 1.3;overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;}
.zixun_list .item_wrap .image{height: 130upx; width: 180upx; position: relative;z-index: 2;
	margin-left: 27upx; min-height: 130upx; min-width: 180upx;}
.zixun_list .item_wrap .default_image{height: 130upx; width: 180upx; position: absolute; right: 0upx;
	margin-left: 27upx; min-height: 130upx; min-width: 180upx; position: absolute;right: 30upx;}

.dai_wrap{display: flex;flex-direction: row; margin-bottom: 70upx; justify-content: space-between;}
.dai_wrap .item_wrap{flex: 1; position: relative; z-index: 1; margin: 22upx 0upx 0upx;}
.dai_wrap .item_wrap image{width: 100%; height: 100%; position: absolute; z-index: 0; border-radius: 10upx;}
.dai_wrap .dai_item{position: relative;z-index: 2; display: flex;flex-direction: column; height: 150upx; line-height: 1.0; padding-left: 30upx;
justify-content: center;border-radius: 10upx; color: #303030; font-size: 26upx;}
.dai_wrap .dai_item .percent{color: #FFFFFF; font-size: 46upx; line-height: 1.0; margin: 12upx 0upx 12upx;}
.dai_wrap .dai_item .percent_hao{color: #FFFFFF; font-size: 32upx;}
.dai_wrap .dai_item .tag{color: #FFFFFF; font-size: 18upx; font-family: 'DIN1451MittelschriftAlt';
	background: #000000; height: 28upx; width: 88upx; text-align: center; line-height: 28upx;  border-radius: 0upx;}

.nav{display: flex; flex-direction: row;width: 100%;border-bottom: rgb(249,249,249) solid 15upx; box-sizing: border-box;}
.nav-item{display: flex; flex-direction: column; padding-top: 30upx; flex: 1; display: inline-block; border-right: 2upx solid #F0F0F0;}
.nav img{width: 160upx; height: 160upx; text-align: center;}
.nav .scroll_content_wrap{display: flex; flex-direction: column; height: 150upx; justify-content: space-between; padding: 10upx 10upx 10upx 20upx; box-sizing: border-box;}
.nav .scroll_content_wrap span{text-overflow: ellipsis; overflow: hidden;width: 210upx;white-space: normal; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.nav .scroll_content_wrap .desc{color: #666666; font-size: 24upx;}

.wrap{margin-top: 100upx; color: #666666; font-size: 28upx; }
.wrap image{width: 360upx;}

.btn{height: 94upx; line-height: 94upx; width: 236upx; background: #FFCA0A; border-radius: 12upx;
text-align: center; color: #303030; font-size: 36upx; margin-top: 70upx;font-weight: bold;}

.uni-swiper-tab{border-bottom: none!important;}
/* .swiper-tab-list {
	font-size: 30upx;
	width: 150upx;
	display: inline-block;
	text-align: center;
	color: #555;
} */





.update_content_bg .title {color: #261900; font-size: 32upx;text-align: center;margin-top: 48upx;}
.update_content_bg .version {color: #999999; font-size: 24upx;text-align: center;margin-top: 6upx;}
.update_content_bg .update_msg{padding: 45upx 40upx 50upx; color: #303030; font-size: 28upx; text-align: left;}
.update_content_bg .updateAction{border-top: 1px solid #CCCCCC; color: #303030; font-size: 30upx; height: 88upx; width: 100%;}
.update_content_bg span{flex:1; height: 88upx; line-height: 88upx;}
.update_content_bg .no_update{border-right: 1px solid #CCCCCC; color: #999999;}

.download-tip{
		z-index: 4;
		position: fixed;
		top: 360upx;
		left: 0;
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		font-size: 28upx;
		text-align: center;
		background-color: #FFCA0A;
		color: #303030;
		-webkit-transition: top 300ms;
		transition: top 300ms;
	}
	
	
	
		page{background: #fff;}
	
	.head_wrap{width: 100%; box-sizing: border-box; height: 400upx;position: relative; }
	.head_wrap .vip_img{width: 100%;position: fixed; top:0upx; z-index: 1;height: 400upx;}
	.head_wrap .head_img_wrap{display: flex; flex-direction: row;align-items: center;position: relative;z-index: 2; padding: 0upx 20upx;color: #fff;font-size: 32upx; }
	.head_wrap .head_img_wrap .image{width: 110upx; height: 110upx; border-radius: 50%;}
	.head_wrap .title{font-weight: bold;text-align: center; height: 50upx; line-height: 50upx; position: relative;z-index: 1; color: #333333; font-size: 36upx; margin-bottom: 40upx;}
	.head_wrap .name_wrap{flex: 1; display: flex;flex-direction: column;margin-left: 20upx; color: #333; font-size: 32upx;}
	.head_wrap .name_wrap .login_btn{width: 160upx; text-align: center; height: 48upx; line-height: 48upx; background: #333333;color: #FFCA0A; font-size: 26upx; border-radius: 8upx; margin-top: 20upx;}
	.head_wrap .kefu{width: 48upx; height: 48upx;}
	
	.account_wrap{padding: 0upx 46upx; margin: -60upx 30upx 0upx; box-shadow: 0px 0px 20upx 0px #EAEAEA; border-radius: 12upx; height: 120upx; position: relative;z-index: 2;background: #fff;;}
	.account_wrap .icon{ width: 48upx; height: 48upx; margin-right: 16upx;border-radius: 8upx;}
	.account_wrap .unit_icon{ width: 18upx; height: 24upx; margin-right: 6upx;}
	.account_wrap .money_qian{font-size: 48upx; color: #FE4444;}
	.account_wrap .money_dian{font-size: 24upx; color: #FE4444;}
	
	.my_head_wrap{padding: 0upx 20upx; color: #333333; font-size: 28upx;}
	.touxiang{width: 72upx;margin-right: 20upx; border-radius: 50%;}
	.setting_img{width: 40upx;}
	.func_wrap{flex-flow: wrap; width: 100%; padding: 0upx 30upx; box-sizing: border-box; margin-top: 40upx;}
	.func_wrap img{width: 60upx;margin-bottom: 10upx;}
	.func_item{color: #333333; font-size: 28upx; height: 168upx; flex:1;border: 2upx solid #F3F3F3; margin: 10upx 10upx 0upx;border-radius: 8upx;}
	.bottom_item_wrap{padding-left: 40upx;width: 100%; box-sizing: border-box; margin-top: 30upx;}
	.bottom_item{color: #333333; font-size: 28upx; height: 116upx;  padding-right: 30upx;}
	.bottom_item .icon{ margin-right: 24upx; width: 48upx; height: 48upx;}
	.bottom_item .text{color: #261900; font-size: 30upx;}
	.bottom_item .info{color: #8F8F8F; font-size: 22upx;}

/* sticky 容器 start */
	.sticky-item {
		width: 100%;
		padding: 20upx 30upx;
		background: #fafafa;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	/* sticky 容器 end */
	
</style>
